import React from 'react';
import styled from '@emotion/styled';
import MessageText from './MessageText';
import MessageImage from './MessageImage';
import MessageVideo from './MessageVideo';
import MessagePdf from './MessagePdf';

interface MessageItemProps {
	message: any;
	onSelect: (question: string) => void;
	onPreview: (message: any) => void;
}

const MessageItem: React.FC<MessageItemProps> = ({ message, onSelect, onPreview }) => {
	const handleSelect = (question: string) => onSelect(question);

	return (
		<Container>
			{['robot'].includes(message.from) && (
				<Content className={message.from === 'user' ? 'user' : 'robot'}>
					{message.type === 'image' && <MessageImage content={message.text} />}
					{message.type === 'video' && <MessageVideo content={message.text} onPreview={() => onPreview(message)} />}
					{message.type === 'pdf' && <MessagePdf name={message.fileName!} onPreview={() => onPreview(message)} />}
					{message.type !== 'image' && message.type !== 'video' && message.type !== 'pdf' && <MessageText content={message.text} />}
				</Content>
			)}
			{message.from === 'prompt' && (
				<Prompt>
					<Title>你可能想问：</Title>
					<Text>
						{message.questions?.map((question: any, index: number) => (
							<p key={index} onClick={() => handleSelect(question)}>
								{question}
							</p>
						))}
					</Text>
				</Prompt>
			)}
		</Container>
	);
};

export default MessageItem;

const Container = styled.div`
	display: flex;
`;

const Content = styled.div`
	width: fit-content;
	border-radius: 10px;

	&.user {
		background: #06f;
		color: #fff;
	}

	&.robot {
		color: #000;
		min-width: 100%;
	}
`;

const ToolBar = styled.div`
	text-align: right;
`;

const Prompt = styled.div`
	width: 100%;
	border-radius: 10px;
	background: #f5f5f5;
`;

const Title = styled.div`
	font-size: 14px;
	font-weight: bold;
	color: #242728;
	line-height: 20px;
	margin-bottom: 10px;
	text-align: left;
`;

const Text = styled.div`
	font-size: 14px;
	text-align: left;
	white-space: pre-line;
	text-align: center;
	color: #1989fa;

	p {
		border: #1989fa 1px solid;
		border-radius: 16px;
		width: 100%;
		display: block;
		line-height: 32px;
		margin-bottom: 10px;
		cursor: pointer;
	}
`;
